<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label="区域名称" v-bind="formItemLayout">
                    <a-input placeholder="请输入区域名称" style="width: 500px;"
                             v-decorator="['name',{rules: [{ required: true, message: '区域名称不能为空!' }]}]"/>
                </a-form-item>

                <a-form-item label="请选择骑手" v-bind="formItemLayout">
                    <a-input style="width: 500px;" readonly @click="staffVisible = true" v-model="staff.name" ></a-input>
                    <a-input type="hidden" v-decorator="['staffId',{rules: [{ required: true, message: '请选择骑手!'}]}]"></a-input>
                </a-form-item>
                <a-form-item label="请输入区域范围" v-bind="formItemLayout">
                    <a-textarea placeholder="请输入区域范围" :rows="4"  v-decorator="['remark']" style="width: 500px;"/>
                </a-form-item>

                <a-form-item :wrapperCol="{span:18,offset: 5}">
                    <a-input type="hidden" v-decorator="['id']"></a-input>
                    <a-button type='primary' :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
        <a-modal title="选择骑手" v-model="staffVisible" :footer="null" width="800px" class="selection-modal">
            <select-staff v-if="staffVisible" checkedType="checkbox" @result="emitStaff"></select-staff>
        </a-modal>
    </div>
</template>
<script>
    import {saveRegion,findRegionDetail} from "../../api/site";
    import SelectStaff from '../../components/selectStaff/index'

    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                params:{
                    id:0,
                },
                bntLoading:false,
                staffVisible:false,
                staff:'',
                siteId:0,

            }
        },
        components:{SelectStaff},
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            },
        },
        methods:{
            emitStaff(r){
                this.staff = r;
                this.form.setFieldsValue({staffId:r.id});
                this.staffVisible = false;
            },
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                data.siteId = this.siteId;
                let resp = await saveRegion(data);
                this.spinning = false;
                if(this.qUtil.validResp(resp)){
                    let _this = this;
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.$router.push({name:'SiteRegionList',query:{siteId:_this.siteId}});}
                    });
                }else{
                    this.$warning({title:resp.msg || '保存失败',okText:'确定'});
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                if(this.params.id > 0) {
                    let resp = await findRegionDetail(this.params.id);
                    console.log('===>', resp)
                    if (this.qUtil.validResp(resp)) {
                        this.staff = resp.data.region.staff;
                        const { id,name,staffId,remark} = resp.data.region;
                        this.form.setFieldsValue({id,name,staffId,remark});
                    }
                }
            },

        },
        mounted(){
            this.params.id = this.$route.query.id || 0;
            this.siteId = this.$route.query.siteId || 0;
            this.onLoad();
        },
    }
</script>